﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProgrammeManagement.aspx.cs" Inherits="IAATO.ProgrammeManagement" MaintainScrollPositionOnPostback="true" Culture="en-US" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <asp:HiddenField runat="server" ID="hdfIdNavire"/>
    <asp:HiddenField runat="server" ID="hdfSerializedSites"/>
    <asp:HiddenField runat="server" ID="hdfProgramme"/>
    <asp:HiddenField runat="server" ID="hdfClickedSiteId" Value="-1"/>
    <asp:HiddenField runat="server" ID="hdfJour" />
    <asp:HiddenField runat="server" ID="hdfMois" />
    <asp:HiddenField runat="server" ID="hdfAnnee" />
    <asp:HiddenField runat="server" ID="hdfSelectedValues" />
    <asp:HiddenField runat="server" ID="hdfEditingMode" Value="False" />
    <asp:HiddenField runat="server" ID="hdfNavireEtranger" Value="False" />

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>

    <script>

        if (document.getElementById('<% =hdfEditingMode.ClientID %>').value == 'True') {
            window.onload = function () { $('ol.programme li').css({ "padding": "9px 0" }); };
        }
        else {
            window.onload = function () { $('ol.programme li').css({ "padding": "15px 0" }); };
        }


        function initializeMap() {
            var myOptions = {
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById('map'), myOptions);

            var sites = $.parseJSON(document.getElementById('<% =hdfSerializedSites.ClientID %>').value);
            var programme = $.parseJSON(document.getElementById('<% =hdfProgramme.ClientID %>').value);

            //alert("programme" + document.getElementById('<% =hdfProgramme.ClientID %>').value);
            //alert("sites" + document.getElementById('<% =hdfSerializedSites.ClientID %>').value);

            var boundsSites = new google.maps.LatLngBounds();
            var boundsProgramme = new google.maps.LatLngBounds();

            var currentInfoWindow = null;

            for (var i = 0; i < sites.length; i++) {
                var site = sites[i];

                var siteCoord = new google.maps.LatLng(site.lat, site.lng);

                // MARKER
                var marker;
                var nbCreneaux = 0;

                if (programme.length != 0 && (site.id == programme[0].cre1.siteId || site.id == programme[0].cre2.siteId || site.id == programme[0].cre3.siteId || site.id == programme[0].cre4.siteId || site.id == programme[0].cre5.siteId)) {
                    var image;

                    if (site.id == programme[0].cre1.siteId)
                        image = 'Images/ss1.png';
                    else if (site.id == programme[0].cre2.siteId)
                        image = 'Images/ss2.png';
                    else if (site.id == programme[0].cre3.siteId)
                        image = 'Images/ss3.png';
                    else if (site.id == programme[0].cre4.siteId)
                        image = 'Images/ss4.png';
                    else if (site.id == programme[0].cre5.siteId)
                        image = 'Images/ss5.png';

                    marker = new google.maps.Marker({
                        map: map,
                        position: siteCoord,
                        title: site.nom,
                        icon: image,
                        zIndex: google.maps.Marker.MAX_ZINDEX + 1
                    });

                    boundsProgramme.extend(siteCoord);
                    nbCreneaux++;
                }
                else {
                    marker = new google.maps.Marker({
                        map: map,
                        position: siteCoord,
                        title: site.nom
                    });

                    if (site.nbBateaux == 0)
                        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
                    else if (site.nbBateaux == 1 || site.nbBateaux == 2)
                        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/yellow-dot.png');
                    else if (site.nbBateaux == 3 || site.nbBateaux == 4)
                        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/orange-dot.png');
                    else if (site.nbBateaux == 5)
                        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');

                    //marker.setShadow('http://maps.gstatic.com/mapfiles/ms2/micons/msmarker.shadow.png');

                    boundsSites.extend(siteCoord);
                }


                // INFO WINDOW
                var infoWindow = new google.maps.InfoWindow();
                
                


                /*var creneauUtilises = 0;
                
                var cre1Libre = true;
                var cre2Libre = true;
                var cre3Libre = true;
                var cre4Libre = true;
                var cre5Libre = true;

                for (var k = 0; k < site.programmes.length; k++) {
                    var programme = site.programmes[k];

                    if (cre1Libre && programme.cre1.siteId == site.id) {
                        cre1Libre = false;
                        creneauxUtilises++;
                    }

                    if (cre2Libre && programme.cre2.siteId == site.id) {
                        cre2Libre = false;
                        creneauxUtilises++;
                    }

                    if (cre3Libre && programme.cre3.siteId == site.id) {
                        cre3Libre = false;
                        creneauxUtilises++;
                    }

                    if (cre4Libre && programme.cre4.siteId == site.id) {
                        cre4Libre = false;
                        creneauxUtilises++;
                    }

                    if (cre5Libre && programme.cre5.siteId == site.id) {
                        cre5Libre = false;
                        creneauxUtilises++;
                    }
                }*/


                google.maps.event.addListener(marker, 'click', function(marker, infoWindow, site) {
                    return function () {
                        if (currentInfoWindow != null) {
                            currentInfoWindow.close();
                        }

                        currentInfoWindow = infoWindow;
                        infoWindow.open(map, marker);

                        document.getElementById('<% =hdfClickedSiteId.ClientID %>').value = site.id;
                        //alert(JSON.stringify({ siteId: siteId, jour: parseInt(document.getElementById('<% =hdfJour.ClientID %>').value), mois: parseInt(document.getElementById('<% =hdfMois.ClientID %>').value), annee: parseInt(document.getElementById('<% =hdfAnnee.ClientID %>').value) }));
                        $.ajax({
                            type: "POST",
                            url: "ProgrammeWebService.asmx/getSiteInfo",
                            data: JSON.stringify({ siteId: site.id, jour: parseInt(document.getElementById('<% =hdfJour.ClientID %>').value), mois: parseInt(document.getElementById('<% =hdfMois.ClientID %>').value), annee: parseInt(document.getElementById('<% =hdfAnnee.ClientID %>').value) }),
                            contentType: "application/json; charset=utf-8",
                            success: function(response) {
                                var data = $.parseJSON(response.d);

                                var sActivites = '';

                                for (var j = 0; j < data.activites.length; j++) {
                                     if (j > 0) {
                                         sActivites += ', ';
                                     }
                 
                                     sActivites += data.activites[j].nom;
                                }

                                var cre1Libre = true;
                                var cre2Libre = true;
                                var cre3Libre = true;
                                var cre4Libre = true;
                                var cre5Libre = true;

                                var sCreneauxLibres = '';

                                for (var k = 0; k < data.creneaux.length; k++) {
                                    var creneau = data.creneaux[k];

                                    if (creneau.ordre == 1)
                                        cre1Libre = false;
                                    else if (creneau.ordre == 2)
                                        cre2Libre = false;
                                    else if (creneau.ordre == 3)
                                        cre3Libre = false;
                                    else if (creneau.ordre == 4)
                                        cre4Libre = false;
                                    else if (creneau.ordre == 5)
                                        cre5Libre = false;

                                }

                                if (cre1Libre)
                                    sCreneauxLibres += 'earling morning, ';

                                if (cre2Libre)
                                    sCreneauxLibres += 'morning, ';

                                if (cre3Libre)
                                    sCreneauxLibres += 'afternoon, ';

                                if (cre4Libre)
                                    sCreneauxLibres += 'evening, ';

                                if (cre5Libre)
                                    sCreneauxLibres += 'overnight, ';

                                if (sCreneauxLibres == '')
                                    sCreneauxLibres = 'none';
                                else
                                    sCreneauxLibres = sCreneauxLibres.slice(0, -2);

                                sCreneauxLibres = sCreneauxLibres.charAt(0).toUpperCase() + sCreneauxLibres.slice(1)

                                infoWindow.setContent('<h5 style="margin: 0">' + site.nom + '</h5><hr/>' +
                                                      '<p style="margin: 0; margin-top: 10px; margin-left: 10px"><strong>Free slots </strong>: ' + sCreneauxLibres + '</p>' +
                                                      '<p style="margin-bottom: 0; margin-left: 10px"><strong>Available activities </strong>: ' + sActivites + '</p>');
                            },
                            error: function() { 
                                alert("Error calling the web service.");  
                            } 
                        });

                    }
                }(marker, infoWindow, site));

                google.maps.event.addListener(infoWindow, 'closeclick', function () {
                    currentInfoWindow = null;
                });
            }


            if (nbCreneaux == 0) {
                map.fitBounds(boundsSites);
            }
            else {
                map.fitBounds(boundsProgramme);
            }



            // POLYLINE
           /* if (programme.length != 0) {
                var itineraireCoord = [];

                if (programme[0].cre1.siteId != -1) {
                    itineraireCoord.push(new google.maps.LatLng(programme[0].cre1.siteLat, programme[0].cre1.siteLng));
                    testIfCompletePolyline(itineraireCoord, map);
                    alert('hé');
                }

                if (programme[0].cre2.siteId != -1) {
                    itineraireCoord.push(new google.maps.LatLng(programme[0].cre2.siteLat, programme[0].cre2.siteLng));
                    testIfCompletePolyline(itineraireCoord, map);
                }

                if (programme[0].cre3.siteId != -1) {
                    itineraireCoord.push(new google.maps.LatLng(programme[0].cre3.siteLat, programme[0].cre3.siteLng));
                    testIfCompletePolyline(itineraireCoord, map);
                }

                if (programme[0].cre4.siteId != -1) {
                    itineraireCoord.push(new google.maps.LatLng(programme[0].cre4.siteLat, programme[0].cre4.siteLng));
                    testIfCompletePolyline(itineraireCoord, map);
                }

                if (programme[0].cre5.siteId != -1) {
                    itineraireCoord.push(new google.maps.LatLng(programme[0].cre5.siteLat, programme[0].cre5.siteLng));
                    testIfCompletePolyline(itineraireCoord, map);
                }
            }*/

        }

        /*
        function testIfCompletePolyline(itineraireCoord, map) {
            if (itineraireCoord.length == 2) {
                var flecheItineraire = {
                    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
                };


                var lineSymbol = {
                    path: 'M 0,-1 0,1',
                    strokeOpacity: 1,
                    scale: 4
                };

                var itineraire = new google.maps.Polyline({
                    path: itineraireCoord,
                    //strokeColor: '#FF0000',
                    strokeOpacity: 1,
                    strokeWeight: 10,
                    icons: [{ icon: lineSymbol, offset: '0', repeat: '20px' }, { icon: flecheItineraire, offset: '100%' }],
                });

                itineraire.setMap(map);

                itineraireCoord = [];
            }
        }*/

    </script>


    <asp:Panel runat="server" ID="pnlChoixNavire" style="text-align: center;">
        <h1 style="display: inline"><asp:Label ID="lblNomNavire" runat="server"></asp:Label> <asp:LinkButton Visible="false" ID="lkbChangerNavire" runat="server" OnClick="lkbChangerNavire_Click" >(changer)</asp:LinkButton></h1>
    </asp:Panel>

    <br />
    <hr />
    <br />
    <br />
        
    <asp:Panel ID="pnlProgramme" runat="server" Height="400px" style="margin-top: 20px; margin-bottom: 20px">
    

        <asp:Panel ID="pnlLeft" runat="server" Style="float: left" Width="40%" Height="384px">

            <asp:Calendar CssClass="calHeader" ID="calProgramme" runat="server" Height="400px" Width="380px" BackColor="#EFEEEF" BorderColor="Black" Font-Names="Lato, Helvetica, Sans-Serif" Font-Size="9pt" ForeColor="Black" OnSelectionChanged="calProgramme_SelectionChanged" NextPrevFormat="FullMonth">
                <DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
                <NextPrevStyle Font-Size="8pt" ForeColor="#333333" Font-Bold="True" VerticalAlign="Bottom" />
                <OtherMonthDayStyle ForeColor="#999999" />
                <SelectedDayStyle BackColor="#333399" ForeColor="White" />
                <TitleStyle BackColor="White" Font-Bold="True" Font-Size="12pt" ForeColor="#333399" BorderColor="Black" BorderWidth="1px" />
                <TodayDayStyle BackColor="#CCCCCC" />
            </asp:Calendar>

        </asp:Panel>

        <asp:Panel ID="pnlRight" runat="server" Style="float: left; text-align: center" Width="58%" Height="384px">

            <h3 style="margin-top: 21px; font-size: 22px">Schedule of the <asp:Label ID="lblDateProgramme" runat="server"></asp:Label> <asp:LinkButton runat="server" ID="lkbModifier" OnClick="btnModifier_Click">(edit)</asp:LinkButton><asp:Label runat="server" ID="lblValiderOuAnnuler"><asp:LinkButton runat="server" OnClick="btnValider_Click">(save</asp:LinkButton> or <asp:LinkButton runat="server" OnClick="btnAnnuler_Click">cancel)</asp:LinkButton></asp:Label></h3>

            <ol runat="server" id="olProgramme" class="programme">
                <asp:HiddenField runat="server" ID="hdfIdProgramme" Visible="false" Value="-1" />

                <li runat="server" id="li1" onmouseover="if (($('#MainContent_hSite1').length > 0)) { document.getElementById('secPetitMatin').style.display = 'block'; $('#hrPetitMatin').css({ width: $('#spanSite1').width() }); }" onmouseout="document.getElementById('secPetitMatin').style.display = 'none'">
                    <section id="secPetitMatin" style="display: none">
                        <h5 style="margin: 0">Early morning</h5>
                        <hr id="hrPetitMatin" style="width: 77px" />
                    </section>
                    <asp:DropDownList Width="219"  ID="ddlModifierSite1" runat="server" style="display: block; margin: auto; margin-bottom: 3px" Visible="False" AutoPostBack="True" OnSelectedIndexChanged="ddlModifierSite_SelectedIndexChanged"></asp:DropDownList>
                    <asp:DropDownList Width="219"  ID="ddlModifierActivite1" runat="server" style="display: block; margin: auto; margin-bottom: 3px" Visible="False" AutoPostBack="False" OnSelectedIndexChanged="ddlModifierActivite_SelectedIndexChanged"></asp:DropDownList>

                    <span id="spanSite1">
                        <h4 runat="server" id="hSite1"></h4>
                    </span>
                    <p runat="server" id="pActivite1" style="padding: 0; margin: 0"></p>

                    <asp:HiddenField runat="server" ID="hdfIdCreneau1" Visible="false" Value="-1" />
                </li>

                <li runat="server" id="li2"  onmouseover="if (($('#MainContent_hSite2').length > 0)) { document.getElementById('secMatin').style.display = 'block'; $('#hrMatin').css({ width: $('#spanSite2').width() }); }" onmouseout="document.getElementById('secMatin').style.display = 'none'">
                    <section id="secMatin" style="display: none">
                        <h5 style="margin: 0">Morning</h5>
                        <hr id="hrMatin" style="width: 77px" />
                    </section>
                    <asp:DropDownList Width="219"  ID="ddlModifierSite2" runat="server" style="display: block; margin: auto; margin-bottom: 3px" Visible="False" AutoPostBack="True" OnSelectedIndexChanged="ddlModifierSite_SelectedIndexChanged"></asp:DropDownList>
                    <asp:DropDownList Width="219"  ID="ddlModifierActivite2" runat="server" style="display: block; margin: auto; margin-bottom: 3px" Visible="False" AutoPostBack="False" OnSelectedIndexChanged="ddlModifierActivite_SelectedIndexChanged"></asp:DropDownList>

                    <span id="spanSite2">
                        <h4 runat="server" id="hSite2"></h4>
                    </span>
                    <p runat="server" id="pActivite2" style="padding: 0; margin: 0"></p>

                    <asp:HiddenField runat="server" ID="hdfIdCreneau2" Visible="false" Value="-1"/>
                </li>

                <li runat="server" id="li3" onmouseover="if (($('#MainContent_hSite3').length > 0)) { document.getElementById('secApresMidi').style.display = 'block'; $('#hrApresMidi').css({ width: $('#spanSite3').width() }); }" onmouseout="document.getElementById('secApresMidi').style.display = 'none'">
                    <section id="secApresMidi" style="display: none">
                        <h5 style="margin: 0">Afternoon</h5>
                        <hr id="hrApresMidi" style="width: 77px" />
                    </section>
                    <asp:DropDownList Width="219"  ID="ddlModifierSite3" runat="server" style="display: block; margin: auto; margin-bottom: 3px" Visible="False" AutoPostBack="True" OnSelectedIndexChanged="ddlModifierSite_SelectedIndexChanged"></asp:DropDownList>
                    <asp:DropDownList Width="219"  ID="ddlModifierActivite3" runat="server" style="display: block; margin: auto; margin-bottom: 3px" Visible="False" AutoPostBack="False" OnSelectedIndexChanged="ddlModifierActivite_SelectedIndexChanged"></asp:DropDownList>

                    <span id="spanSite3">
                        <h4 runat="server" id="hSite3"></h4>
                    </span>
                    <p runat="server" id="pActivite3" style="padding: 0; margin: 0"></p>

                    <asp:HiddenField runat="server" ID="hdfIdCreneau3" Visible="false" Value="-1" />
                </li>
            
                <li runat="server" id="li4" onmouseover="if (($('#MainContent_hSite4').length > 0)) { document.getElementById('secSoiree').style.display = 'block'; $('#hrSoiree').css({ width: $('#spanSite4').width() }); }" onmouseout="document.getElementById('secSoiree').style.display = 'none'">
                    <section id="secSoiree" style="display: none">
                        <h5 style="margin: 0">Evening</h5>
                        <hr id="hrSoiree" style="width: 77px" />
                    </section>
                    
                    <asp:DropDownList Width="219"  ID="ddlModifierSite4" runat="server" style="display: block; margin: auto; margin-bottom: 3px" Visible="False" AutoPostBack="True" OnSelectedIndexChanged="ddlModifierSite_SelectedIndexChanged"></asp:DropDownList>
                    <asp:DropDownList Width="219"  ID="ddlModifierActivite4" runat="server" style="display: block; margin: auto; margin-bottom: 3px" Visible="False" AutoPostBack="False" OnSelectedIndexChanged="ddlModifierActivite_SelectedIndexChanged"></asp:DropDownList>

                    <span id="spanSite4">
                        <h4 runat="server" id="hSite4"></h4>
                    </span>
                    <p runat="server" id="pActivite4" style="padding: 0; margin: 0"></p>

                    <asp:HiddenField runat="server" ID="hdfIdCreneau4" Visible="false" Value="-1" />
                </li>

                <li runat="server" id="li5" onmouseover="if (($('#MainContent_hSite5').length > 0)) { document.getElementById('secNuit').style.display = 'block'; $('#hrNuit').css({ width: $('#spanSite5').width() }); }" onmouseout="document.getElementById('secNuit').style.display = 'none'">
                    <section id="secNuit" style="display: none">
                        <h5 style="margin: 0">Overnight</h5>
                        <hr id="hrNuit" style="width: 77px" />
                    </section>

                    <asp:DropDownList Width="219"  ID="ddlModifierSite5" runat="server" style="display: block; margin: auto; margin-bottom: 3px; text-align: center" Visible="False" AutoPostBack="True" OnSelectedIndexChanged="ddlModifierSite_SelectedIndexChanged"></asp:DropDownList>
                    <asp:DropDownList Width="219"  ID="ddlModifierActivite5" runat="server" style="display: block; margin: auto; margin-bottom: 3px; text-align: center; margin: auto" Visible="False" AutoPostBack="False" OnSelectedIndexChanged="ddlModifierActivite_SelectedIndexChanged"></asp:DropDownList>
                    
                    <span id="spanSite5">
                        <h4 runat="server" id="hSite5"></h4>
                    </span>
                    <p runat="server" id="pActivite5" style="padding: 0; margin: 0"></p>

                    <asp:HiddenField runat="server" ID="hdfIdCreneau5" Visible="false" Value="-1" />
                </li>
            </ol>

        </asp:Panel>
     
    </asp:Panel>

    <br />
    <hr />
    <br />
    <br />

    <div id="map" style="width: 960px; height: 560px"></div>


</asp:Content>

